<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">

<style>
	*{
		padding: 0;
		margin: 0;
	}

	p{
		font-size: 26px;
		font-weight: bold;
		font-family: '微软雅黑';
		padding: 10px;
	}
	.i1{
		width:100px;
		height:100px;
	}
	.pic{
	margin-left: 10px;
	width:70px;
	overflow:hidden;
	}
	.picshow{
	margin-top: 10px;
	}
	.ban{
	  background-color: #409EFF !important; /* Element UI 的蓝色 */  
  	border-color: #409EFF !important; /* 确保边框也是蓝色 */  
  	color: #FFFFFF !important; /* 文本颜色，根据需要调整 */
	}
    /*去除upload组件过渡效果*/
    .el-upload-list__item {
      transition: none !important;
    }
</style>

</head>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
              <el-input v-model="user.uname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="user.email" placeholder="邮箱"></el-input>
              </el-form-item>
    
            <el-form-item label="权限">
              <el-select v-model="user.status" placeholder="权限">
                <el-option label="所有" value="全部"></el-option>
                <el-option label="用户" value="用户"></el-option>
                <el-option label="管理员" value="管理员"></el-option>
                <el-option label="封禁" value="封禁"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="byselect(1)">查询</el-button>
            </el-form-item>
          </el-form>

        <!--表格显示-->
          <el-table
          :data="members.records"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          label="用户编号"
          align="center"
          width="80px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="用户头像"
          align="center"
          >
          <template slot-scope="scope">
            <span><img class="i1" :src="scope.row.pic"></span>
          </template>
          </el-table-column>
          <el-table-column
          label="用户名"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="邮箱"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="权限"
          align="center"
          width="120px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.status}}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="密码操作"
          align="center"
          >
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="cz(scope.$index, scope.row)">重置密码</el-button>
          </template>
          </el-table-column>
          
          
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
          <el-button v-if="scope.row.status == '封禁'"
          size="mini"
          type="danger"
          @click="noban(scope.$index, scope.row)">解禁</el-button>
          <el-button v-if="scope.row.status == '用户'"
          size="mini"
          type="danger"
          class="ban"
          @click="ban(scope.$index, scope.row)">封禁</el-button>
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
          </el-table-column>
        </el-table>

        <!--页码-->
        <br/>
        <div class="block">
  		<el-pagination
    	layout="prev, pager, next"
    	:total="total"
    	:page-size="4"
    	:current-page="pagenum"
    	@current-change="byselect">
  		</el-pagination>
		</div>
    </el-card>
    
    <!-- 编辑信息弹框 -->
  <el-dialog title="修改用户信息" :visible.sync="updateUser" @close="handleClose" top="0">
    <el-form>
      <el-form-item label="用户名">
        <el-input v-model="update.name" placeholder="用户名"></el-input>
      </el-form-item>

      <!--      图片-->
      <el-upload
              class="upload-demo"
              action="../../cloud-other/review/upload"
              :on-change="handleChange"
              :file-list="fileList"
              :auto-upload="true"
              :on-success="upyes"
              :before-remove="handleRemove"
              :on-error="upno"
              list-type="picture"
              :limit="1">
        <i slot="trigger" class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <el-form-item label="邮箱">
        <el-input v-model="update.email" placeholder="邮箱"></el-input>
      </el-form-item>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateUser = false">取 消</el-button>
      <el-button type="primary" @click="updateData">确 定</el-button>
    </div>
  </el-dialog>
</div>

<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>

<script>
	let app = new Vue({
		el:'#app',
		data:{
			user:{
                uname:'',
                email:'',
                status:'全部'
            },
            members: [],
            updateUser : false,
            update:{},
            picshow:'',
            newpic:'',
    		pagenum: 1,
    		total:0,
          fileList: [
            {
              name: 'pic',
              url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.mPGy-QSWMXym-J4zC_MJfwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2'
            }],
          dialogImageUrl: '',
          dialogVisible2: false,
		},
        created(){
          //获取用户信息
          this.byselect(1);
        },
		methods:{
            //查询用户信息
            byselect(currentPage){
            	this.pagenum = currentPage;
                let p = new URLSearchParams();
                p.append("pagenum", this.pagenum);
                p.append("uname", this.user.uname);
                p.append("email", this.user.email);
                p.append("status", this.user.status);
            	axios.post("../../cloud-user/user/byselect", p).then(resp=>{
            		this.members = resp.data;
                  console.info(this.members);
                    this.total = Number(this.members.total);
            	});
            },
            //编辑信息弹窗
            handleEdit(index, obj){
            	this.updateUser = true;
            	this.update = JSON.parse(JSON.stringify(obj));
            	this.picshow = this.update.pic;
                this.fileList = [
                  {
                    name: '我的头像',
                    url: this.picshow
                  }
                ];
    	    },
          //关闭事件
          handleClose(){
            this.fileList = [];
          },
    	    //封禁
    	    ban(index, obj){
    	    	axios.get("../../cloud-user/user/ban?uid=" + obj.id).then(resp=>{
    	    		if(resp.data.code == 1){
    	    			this.$message(resp.data.msg);
    	    			//继续条件查询
    	    			this.byselect(this.pagenum);
    	    		}else{
    	    			alert("封禁失败");
    	    		}
    	    	});
    	    },
    	    //解禁
    	    noban(index, obj){
    	    	axios.get("../../cloud-user/user/noban?uid=" + obj.id).then(resp=>{
    	    		if(resp.data.code == 1){
                        this.$message("取消封禁成功");
    	    			//继续条件查询
    	    			this.byselect(this.pagenum);
    	    		}else{
    	    			alert("取消封禁失败");
    	    		}
    	    	});
    	    },
    		//修改用户信息
    		updateData(){
              // 检查是否真的没有做任何修改
              if(this.fileList.length === 0){
                this.$alert("请选择头像");
                return;
              }
    			let p = new URLSearchParams();
    			p.append("uid", this.update.id);
				p.append("name", this.update.name);
				p.append("email", this.update.email);
				p.append("pic", this.newpic);
				axios.post("../../cloud-user/user/updateUserData", p).then(resp => {
					if(resp.data.code === 1){
						alert("编辑成功");
						//继续条件查询
    	    			this.byselect(this.pagenum);
					}else{
						alert("编辑失败");
					}
					this.updateUser = false;
				});
    		},
    		//重置密码
    		cz(index, obj){
    			axios.get("../../cloud-user/user/cz?uid=" + obj.id).then(resp=>{
    				if(resp.data.code === 1){
    					alert("重置密码成功");
    				}else{
    					alert("重置密码失败");
    				}
    			});
    		},
          // 文件上传
          handleChange(file, fileList) {
            // 如果已经选择了文件，则不再允许添加新的文件
            this.fileList = fileList;
            if (this.fileList.length > 1) {
              this.$message.error('只能上传一张图片！');
              // 可以选择移除多余的文件
              this.fileList.splice(1);
            }
            // 如果文件列表中有文件，显示预览
            if (this.fileList.length > 0) {
              this.dialogImageUrl = this.fileList[0].raw ? URL.createObjectURL(this.fileList[0].raw) : this.fileList[0].url;
              this.dialogVisible2 = true;
            }
          },
          handleRemove(file, fileList) {
            // 移除文件并关闭预览
            this.fileList = fileList.filter(f => f.name !== file.name);
            this.dialogVisible2 = false;
          },
          //文件上传成功
          upyes(response){
            this.newpic = response.data;
          },
          //失败
          upno(err){
            alert("抱歉，请重新上传！");
          },
		}
	});
</script>

</body>
</html>